<template>
  <div>
    <div style="display: inline-block; width: 100%">
      <span class="tool-bar-item" v-show="buttons.includes('add')" v-if="status == 1 || status == 2"><el-button
          size="mini" @click="handleAdd">新增行</el-button></span>
      <span class="tool-bar-item" v-show="buttons.includes('remove')" v-if="status == 1 || status == 2"><el-button
          size="mini" @click="handleDelete">移除行</el-button></span>
      <span class="tool-bar-item" v-show="buttons.includes('select-product')"
        v-if="status == 1 || status == 2"><el-button size="mini" @click="handleSelectProduct">产品选择</el-button></span>
      <span class="tool-bar-item" v-show="buttons.includes('batch-fill')"><el-button size="mini"
          @click="handleBatchFill">批量填充</el-button></span>
      <span class="tool-bar-item" v-show="buttons.includes('inventory-view')"><el-button size="mini"
          @click="handleViewInventory">库存查询</el-button></span>

      <span class="tool-bar-item" v-show="showMoreButton">
        <el-dropdown @command="handleCommand">
          <el-button size="mini">
            更多<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="export" icon="el-icon-download"
              v-show="buttons.includes('export')">导出</el-dropdown-item>
            <el-dropdown-item command="import" icon="el-icon-upload2"
              v-show="buttons.includes('import')">导入</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </div>
    <el-drawer title="产品" :visible.sync="showProductDrawer" direction="rtl" :size="'40%'">
      <product-panel v-if="showProductDrawer" :types="productTypes" :purchasable="productPurchasable"
        @selected="handleProductSelected"></product-panel>
    </el-drawer>
    <el-drawer title="产品" :visible.sync="showInventoryDrawer" direction="rtl" :before-close="handleInventoryClose"
      :size="'40%'">
      <product-inventory v-if="showInventoryDrawer" :types="productTypes"
        :purchasable="productPurchasable"></product-inventory>
    </el-drawer>
  </div>
</template>
<script>
import productPanel from '../Panel/productPanel.vue';
import productInventory from '../Panel/productInventory.vue';
export default {
  components: {
    productPanel,
    productInventory
  },
  data() {
    return {
      showProductDrawer: false,
      showInventoryDrawer: false
    };
  },
  methods: {
    handleAdd() {
      this.$emit("add");
    },
    handleDelete() {
      let checkedRows = this.table.getCheckboxRecords();
      if (!checkedRows || checkedRows.length == 0) {
        this.$alert(this.$t("tips.noSelectedRow"), this.$t("common.tips"), {
          confirmButtonText: this.$t("common.ok"),
        });
        return;
      }
      this.$confirm(this.$t("tips.confirmDelete"), this.$t("common.tips"), {
        confirmButtonText: this.$t("common.ok"),
        cancelButtonText: this.$t("common.cancel"),
        type: "warning",
      })
        .then(() => {
          let ids = checkedRows.map((data) => {
            return data.id;
          });
          this.table.remove(checkedRows)
          this.$emit("delete", { ids: ids, rows: checkedRows });
        })
        .catch(() => { });
    },
    handleRefresh() {
      this.$emit("refresh");
    },
    handleBatchFill() {
      this.$emit("fill");
    },
    handleViewInventory() {
      this.showInventoryDrawer = true;
    },
    handleApprove(approved) {
      this.$emit("approve", approved);
    },
    handleSelectProduct() {
      this.showProductDrawer = true;
    },
    handleCommand(command) {
      this.$emit(command);
    },
    handleInventoryClose() {

    },
    handleProductSelected(selection) {
      this.$emit("productSelected", selection);
    }
  },
  mounted() { },
  computed: {
    showMoreButton() {
      return (
        this.buttons &&
        (this.buttons.includes("import") ||
          this.buttons.includes("export") ||
          this.buttons.includes("print"))
      );
    },
  },
  props: {
    table: {
      type: Object,
      default: () => null,
    },
    buttons: {
      type: Array,
      default: () => ["add", "remove", "batch-fill", "select-product", "inventory-view"],
    },
    status: {
      type: Number,
      default: 1
    },
    productTypes: {
      typeof: Array,
      default: () => null
    },
    productPurchasable: {
      type: Boolean,
      default: null
    }
  },
};
</script>
<style scoped>
.tool-bar-item {
  padding-right: 10px;
}
</style>